<template>
  <!-- 用户详情 -->
  <div style="display: flex;flex-direction: column">
    <!-- 上半部分 -->
    <div style="display: flex; justify-content: space-between; align-items: center; padding: 0 20px;">
      <div style="flex: 1;">
        <el-descriptions title="基础信息">
          <el-descriptions-item label="昵称">{{ baseInfo.userName }}</el-descriptions-item>
          <el-descriptions-item label="账户ID">{{ baseInfo.userId }}</el-descriptions-item>
          <el-descriptions-item label="社交平台">{{ baseInfo.blogPlate }}</el-descriptions-item>
          <el-descriptions-item label="发文数量">{{ blogNum }}</el-descriptions-item>
          <el-descriptions-item label="关注数">{{ baseInfo.userFocusNum }}</el-descriptions-item>
          <el-descriptions-item label="粉丝数">{{ baseInfo.userFansNum }}</el-descriptions-item>
          <el-descriptions-item label="设备">{{ baseInfo.reportEquip }}</el-descriptions-item>
          <el-descriptions-item
            label="工作地址">{{ baseInfo.userWorkAddr }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div>
        <el-button @click="incrementalCollection" style="border-radius: 4px 4px 4px 4px;border: 1px solid #5692FF;color: #5692FF;">
          <svg-icon class="search-icon" icon-class="tianjia"/>
          增量采集
        </el-button>
        <el-button @click="routerFn" style="background: linear-gradient( 270deg, #2DBFFD 0%, #0E5FFF 100%);color: white">
          <svg-icon class="search-icon" icon-class="dingwei" />
          查看风险信息
        </el-button>
      </div>
    </div>
    <!-- 下半部分 -->
    <div style=" padding: 20px;    height: 78vh;">
      <div style="color: #000;font-size: 20px;margin-bottom: 10px;font-weight: bold;">基本信息</div>
      <el-tabs style="height: 65vh;" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="发布内容" name="content">
          <contentDom v-if="activeName==='content'" :baseInfo="baseInfo" @totalCount="updateTotalDataCount"></contentDom>
        </el-tab-pane>
        <el-tab-pane label="社交关系" name="relationship">
              <relationship :userInfo="baseInfo" :ID="userId" v-if="activeName==='relationship'"></relationship>
        </el-tab-pane>
        <el-tab-pane label="定位结果" name="positioning">
          <dingwei v-if="activeName==='positioning'" :baseInfo="baseInfo"></dingwei>
                    <!-- <testMap ref="testMapRef" class="testMapRef" :baseInfo="baseInfo" v-if="activeName==='positioning'" >
                    </testMap> -->
                    <!-- <b-map class="testMap" v-if="center&&activeName==='positioning'" :height="'-webkit-fill-available'" :width="'100%'" ref="testMapRef" :center="center">
                    </b-map> -->
        </el-tab-pane>
      </el-tabs>

    </div>
  </div>
</template>

<script>
// import testMap from './components/Smap.vue';
import contentDom from './components/contentDom.vue'
import relationship from './components/relationship.vue'
import {detailsUser} from "@/api/combatUser/importantUser";
import dingwei from './components/dingwei.vue'
// import BMap from './components/bmap.vue';
import {
  deleteUserBlog,
  crawlUser,
} from "@/api/combatUser/combat";
export default {
  components: {
    // testMap, 
    contentDom, 
    relationship,
    dingwei
    // ,BMap
  },

  data() {
    return {
      blogNum: 0,
      tabPosition: 'left',
      activeName: 'content',
      id: '',
      userId:'',
      //基本信息
      baseInfo: {
        userId: '',
        userName: '',
        userNickname: '',
        userIp: '',
        userFocusNum: '',
        userFansNum: '',
        userHomeAddr: '',
        userHomeLat: '',
        createBy: '',
        createTime: '',
        updateBy: '',
        updateTime: '',
        remark: '',
        id: '',
        userPlate: '',
        userWorkAddr: '',
        blogId:'',
        reportime:'',
        reportContent:'',
        reportImages:'',
        reportVideo:'',
        reportEquip:'',
        crawltime:'',
        blogPlate:'',
      },
      center:null,
    };
  },
  mounted() {
    //从地址中获取参数id
    this.id = this.$route.query.id;
    this.userId = this.$route.query.userId;
    this.queryData();
  },
  methods: {
    updateTotalDataCount(totalDataCount) {
      console.log('totalDataCount',totalDataCount);
      this.blogNum = totalDataCount;
    },
    //切换页面
    handleClick(tab, event) {
    //   //如果页面等于定位结果调用地图的方法渲染数据
      if (tab.name === 'positioning') {
    //     debugger;
        let {userWorkLat,userWorkLon,userHomeLat,userHomeLon} = this.baseInfo;

    //        //调用testMap中的方法 并传递数据过去
    //    setTimeout(() => {
    //     this.$refs.testMapRef.addMarkers([
    //   {
    //     x: userWorkLat, y: userWorkLon, color: 'yellow', params: {name:'工作地址'}
    //   },
    //   {
    //     x: userHomeLat, y: userHomeLon, color: 'blue', params: {name:'家庭地址'}
    //   },
    //   // {
    //   //   x: 113.62776, y: 34.75488, color: 'yellow', params: {}
    //   // }
    // ]);
    //    }, 1000);
    this.center={ lng: userHomeLon, lat: userHomeLat }
    this.$nextTick(() => {
      this.$refs.testMapRef.setData({
          points: [
            {
              lng: userHomeLon, lat: userHomeLat,
              color: "blue",
              params: { name: '家庭地址', ...this.userInfoData }
            },
            {
              lng: userWorkLon, lat: userWorkLat,
              color: "yellow",
              params: { name: '工作地址' }
            },
          ],
        });
    });
      }
    },
    incrementalCollection(){
      console.log('增量采集',this.baseInfo);
     deleteUserBlog(this.baseInfo.userId).then(res => {
      if(res.code === 200){
        this.handleAcquisition(this.baseInfo);
      }
     })
    },

     /** 采集按钮操作 */
     handleAcquisition(row) {
        crawlUser(row.id);
        //2秒后刷新页面
        setTimeout(() => {
          this.$router.go(0);
        }, 2000);
    },
    routerFn(){
        this.$router.push(`/networkUser/alarmInformation?userId=${this.userId}`)
      },
    // 进入页面的查询
    queryData() {
      detailsUser(this.id).then(res => {
        //将数据合并到baseInfo中有值更新没有值忽略
        this.baseInfo = Object.assign({}, this.baseInfo, res.data);
      })

    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelectionChange() {
    },
  },
};
</script>
<style lang="scss" scoped>


.search-icon {
  cursor: pointer;
  font-size: 18px;
  vertical-align: middle;
}

.el-tabs__content {
  height: 65vh;
}

::v-deep .el-tabs__content {
  height: 65vh;
}

::v-deep .el-tab-pane {
  height: 100%;
}
</style>
